<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <router-link to="#/home">主页</router-link>
    <router-link to="#/news">新闻</router-link>
    <h1 id="content">
        </好>
</body>

</html>
<script>
    //hash 通过一个叫做onhashchange的方法来监听hash值的改变

    //通过location.hash可以获取当前的hash值

    //hash在相同的时候 并不会触发hashchange这个事件
    // onhashchange = function () {
    //     // console.log(location.hash)
    //     switch (location.hash) {
    //         case "#/home":
    //             content.innerText = '主页'
    //             break
    //         case "#/news":
    //             content.innerText = "新闻"
    //     }
    // }


    //history模式利用了H5中history新增的api pushState replaceState

    //监听history模式变化的事件 叫做popstate

    let as = document.querySelectorAll('router-link');
    // console.log(as);
    [...as].forEach(item => {
        item.onclick = function () {
            // console.log(this.href)
            let path = this.getAttribute('to') //获取a标签上的href属性

            path = path.substring(1)

            //history的跳转方式 新增的api
            history.pushState({ name: "李雷" }, null, path)
        }
    })
    //点击浏览器前进和后退的时候才会触发
    onpopstate = function (e) {
        console.log(e)
    }
</script>